<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <label for="id">城市</label>
        <select name="city" id="city">
            <option value="1">芜湖</option>
            <option value="2">合肥</option>
            <option value="3">南京</option>
        </select>
        <button onclick="getWeatherByJQ()">获取数据ByJQ</button>
    </div>
    <div>
        <label for="weather">天气：</label>
        <span id="weather">晴天</span>
    </div>
    <div>
        <label for="temp">温度：</label>
        <span id="temp">23</span>
    </div>
    
    <script src="jquery.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> -->
    <script>
        // document.querySelector('button').onclick = getWeather;
        function getWeatherByJQ() {
            var loc = $('#city').val()
            console.log(loc);
            switch (loc-0) {
                case 1:
                    var sheng = "安徽"
                    var place = "芜湖"
                    break;
                case 2:
                    var sheng = "安徽"
                    var place = "合肥"
                    break;
                case 3:
                    var sheng = "江苏"
                    var place = "南京"
                    break;
                default:
                    var sheng = "安徽"
                    var place = "芜湖"
                    break;
            }
            $.ajax({
                url: "https://cn.apihz.cn/api/tianqi/tqyb.php",
                method: "GET",
                data: {
                    id: 88888888,
                    key: 88888888,
                    sheng: sheng,
                    place: place
                },
                success: function (res) {
                    console.log(res);
                    //2. 数据的渲染
                    res = JSON.parse(res)
                    $("#weather").text(res.weather1)
                    $('#temp').text(res.temperature)
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }
        function getWeather() {
            // 第一步：创建一个 ajax 对象
            var request = new XMLHttpRequest();
            // 第二步：配置本次请求的信息
            // 第一个参数：请求方式；第二个参数：请求地址；第三个参数：默认是 true 表示异步请求, 选填为 false, 表示同步请求
            request.open('GET', 'https://cn.apihz.cn/api/tianqi/tqyb.php?id=88888888&key=88888888&sheng=安徽&place=芜湖', true);
            // 第三步：配置一个请求完成后触发的事件
            request.onload = function () {
                console.log(request.responseText);
            }
            //第四步：把本次请求发送出去
            request.send();
        }</script>
</body>

</html>